<!-- Created by duwanfu on 2018/11/4 -->
<template>
    <div class="wraper">
      <div class="forms">
        <mt-field label="姓名"
                  placeholder="请输入您的姓名"
                  :attr="{ maxlength: 5 }"
                  v-model="username">
        </mt-field>
        <mt-field label="身份证号"
                  placeholder="请输入您得身份证号"
                  :attr="{ maxlength: 18 }"
                  v-model="idcard">
        </mt-field>
        <mt-field label="手机号"
                  placeholder="请输入您的手机号"
                  :attr="{ maxlength: 11 }"
                  type="tel" v-model="phone">
          <span class="code"
                :class="lock ? 'lock' : ''"
                @click="getCode">
            {{code}}
          </span>
        </mt-field>
        <mt-field label="验证码"
                  placeholder="输入验证码"
                  :attr="{ maxlength: 6 }"
                  v-model="phoneCode">

        </mt-field>
      </div>
      <div class="agreement clearfix">
        <mt-checklist
          v-model="value"
          @change="change"
          :options="option">
        </mt-checklist>
        <span @click="deal">条款</span>
      </div>
      <div @click="susbmit" class="affirm">确认</div>
      <div class="notes">注：在生财有道申请信用卡不收取任何费用，凡事索取费用均为诈骗，请不要相信！</div>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  export default {
    name: "apply",
    data() {
      return {
        username: '',
        idcard: '',
        phone: '',
        phoneCode: '',
        option: [
          {
            label: '同意《生财有道平台协议》的所有',
            value: 'true'
          }
        ],
        value: ['true'],
        lock: false,
        code: '获取验证码'

      }
    },
    mounted () {

    },
    methods: {
      change(e) {
        console.log(e);
      },
      deal() {
        //协议
      },
      verify () {
        let flag = false
        if (!this.username) {
          Toast({ message: '请输入您的姓名' })
          return false
        } else if (!(/^([\u2E80-\u9FFF]){2,5}$/.test(this.username))) {
          Toast({ message: '姓名不合法（2-5个汉字）！' })
          return false
        }  else if (!this.idcard) {
          Toast({ message: '请输入您的身份证号' })
          return false
        }  else if (!/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.idcard)) {
          Toast({ message: '身份证号码不合法！' })
          return false
        } else if (!this.phone) {
          Toast({ message: '请输入您的手机号码' })
          return false
        } else if (!/^1[34578]\d{9}$/.test(this.phone)) {
          Toast({ message: '手机号码不合法！' })
          return false
        } else if (!this.phoneCode) {
          Toast({ message: '请输入您的手机验证码' })
          return false
        } else if (!this.phoneCode.length === 6) {
          Toast({ message: '手机验证码为6位数字' })
          return false
        } else if (!this.value[0]) {
          Toast({ message: '请认真阅读协议并同意' })
          return false
        } else {
          flag = true
        }
        return flag
      },
      susbmit () {
        let flag = this.verify()
        if (flag) {
          let params = {
            phoneNumber: this.phone,
            authCode: this.phoneCode,
            cardNumber: this.idcard,
            cardName: this.username
          }
          this.$http.postAuthentication(params).then(res => {
            console.log(res);
            if (res.message === '成功') {
              this.$router.back(-1)
            }else {
              Toast({ message: res.message })
            }
          })
        }
      },
      timeDown () {
        this.lock = !this.lock
        let time = 10
        this.code = `${time}s`
        let timer = setInterval(() => {
          time--
          this.code = `${time}s`
          if (time<1) {
            this.code = `重新获取`
            this.lock= !this.lock
            clearInterval(timer)
          }
        }, 1000)
      },
      getCode () {
        if(!this.phone){
          Toast({ message: '请输入您的手机号' })
          return;
        }else if(!/^1[3-8]\d{9}$/.test(this.phone)){
          Toast({ message: '您输入的手机号码不合法' })
          return;
        }else if(this.lock) {
          return false;
        }
        this.timeDown()
        let params = {
          phonenumber: this.phone,
          type: 4
        }
        this.$http.getCode(params).then(res => {
          if (res.message === '成功') {
            Toast({ message: '获取验证码成功' })
          }else {
            Toast({ message: res.message })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wraper {
    background: #f1f0ee;
    min-height: 100vh;
    .forms {
      /deep/ .mint-cell-wrapper {
        padding: 0 .3rem;
      }
      /deep/ .mint-field-core {
        text-align: right;
      }
      .code {
        background: rgba(227,0,27,1);
        font-size: .16rem;
        /*padding: .2rem;*/
        width: 1.2rem;
        height: .6rem;
        display: block;
        text-align: center;
        line-height: .6rem;
        border-radius: .08rem;
        color: #ffffff;
      }
      .lock {
        background: rgba(227,0,27,.4) !important;
      }
    }
    .agreement {
      position: relative;
      height: .96rem;
      &>span {
        position: absolute;
        left: 3.93rem;
        height: .96rem;
        line-height: 1.05rem;
        font-size: .2rem;
        text-decoration: underline;
      }
      /deep/ .mint-checklist {
        position: absolute;
        left: 0;
      }
      /deep/ .mint-checklist-title {
        display: none;
      }
      /deep/ .mint-checkbox-core {
        width: .26rem;
        height: .26rem;
      }
      /deep/ .mint-checkbox-core::after {
        top: 0;
        left: .07rem;
      }
      /deep/ .mint-checkbox-label {
        font-size: .2rem;
        color: #999999;
      }
      /deep/ .mint-cell {
        background: none;
        .mint-cell-wrapper {
          background: none;
        }
      }
    }
    .affirm {
      width: 80%;
      height: .9rem;
      margin: 0 auto;
      line-height: .9rem;
      text-align: center;
      color: #ffffff;
      font-size: .3rem;
      background: #dd001b;
      border-radius: .18rem;
    }
    .notes {
      padding: .1rem .3rem;
      font-size: .2rem;
      color: #999999;
      line-height: .4rem;

    }
  }
</style>
